<template>
  <!-- 大的背景盒子 -->
  <div ref="cScratchRef" class="c-scratch" :style="{ height: height }">
    <!-- 定位的盒子 -->
    <div class="canvas-box">
      <!-- 放内容/奖品的盒子 -->
      <div class="prize">
        <slot>
          <img
            style="width: 100%; height: 100%"
            src="./images/scratch_answer.png"
            alt=""
          />
        </slot>
      </div>
      <!-- 蒙版画布 -->
      <canvas ref="canvasRef" class="canvas" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useCanvas } from "./hooks/useCanvas";

export default defineComponent({
  name: "VunScratch",
  emits: ["finish", "start", "trigger-disabled"],
  props: {
    // 画笔粗细
    lineWidth: {
      type: Number,
      default: 30,
    },
    // 刮开1/3面积的时候结束游戏
    finishProportion: {
      type: Number,
      default: 1 / 3,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    message: {
      type: String,
      default: "次数到达上线",
    },
    height: {
      type: [String, Number],
      default: "200px",
    },
  },
  setup(props, { emit }) {
    return {
      ...useCanvas(props, { emit })
    };
  },
});
</script>

<style scoped lang="scss">
.c-scratch {
  box-sizing: border-box;
}

.canvas-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 10px;
  background-color: #fff;
  text-align: center;
  position: relative;
}

.prize {
  width: 100%;
  height: 100%;
}

.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.disappear {
  -webkit-animation: disa 2s 1;
  animation: disa 2s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes disa {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>
